<template>
    <div class="questions-body">
        <div class="content-search">
            <Input v-model="searchText" placeholder="请输入中文或英文搜索术语...">
                <Button slot="append" @click="searchBtn" icon="ios-search"></Button>
            </Input>
        </div>

        <div class="questions-view">
            <!-- <Table class="hide-in-mobile" :columns="columns" :data="termlist"></Table>
    <ol style="overflow: hidden;">
      <li class="terms-item" :index="index" :key="term.id" v-for="(term,index) in termlist" >
              <p class="term-name">{{term.english}}</p>
              <p class="term-explain">{{term.english_defines}}</p>
              <p style="padding-top: 15px;text-align: right;"><a @click="toTermDetail(term.id)" href="javascript:;" class="newcheckChinese">中英文</a></p>
          </li>
    </ol>

    <li style="margin:0 auto;list-style: none;">
          <div class="pagination-box">
              <pagination :pagination="pagination"  @pagination="handlePage"></pagination>
          </div>
            </li>-->
            <table v-if="termlist.length>0" class="question-list">
                <thead>
                    <tr class="question-thead">
                        <td style="padding-left: 18px;">术语</td>
                        <td style="text-align: center;">解释</td>
                        <td style="text-align: center;"></td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in termlist">
                        <td class="question-td2">{{item.english}}</td>
                        <td class="question-td1">{{item.english_defines}}</td>
                        <td class="question-td2">
                            <a
                                @click="toTermDetail(item.id)"
                                href="javascript:;"
                                class="green-btn"
                            >中英文</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <li style="margin:0 auto;list-style: none;">
                <div class="pagination-box">
                    <pagination :pagination="pagination" @pagination="handlePage"></pagination>
                </div>
            </li>
        </div>
        <div>
            <Modal title="查看术语提示" v-model="tipsBuyCard" @on-ok="doPayGold">
                <p>查看术语需要会员卡哦，开通会员后享受更多的优惠！</p>
            </Modal>
        </div>
    </div>
</template>
<style scoped>
/*@import '../../assets/css/ccm.css';*/

.questions-body {
    max-width: 1200px;
    width: 90%;
    background: #fff;
    margin: 0 auto;
    padding-bottom: 42px;
}

.top-tis {
    margin-left: 12px;
    height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #eee;
}

.questions-view {
    width: 1100px;
    margin: 24px auto;
}

.questions-ul {
    border-bottom: 1px solid #ddd;
}

.questions-li {
    list-style: none;
    height: auto;
    line-height: 42px;
    padding: 10px 0;
}

.content-search {
    width: 50%;
    margin: 36px auto;
}

.pagination-box {
    padding: 10px 20px;
}

.terms-item {
    background: #f3f3f3;
    padding: 20px;
    width: 100%;
    position: relative;
    min-height: 100px;
    margin-bottom: 20px;
    transition: all 0.45s linear;
    border: 1px solid #e5e5e5;
}

.terms-item:hover {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
}

.term-name {
    color: #15ccac;
    font-size: 16px;
    line-height: 1.5;
}

.term-explain {
    font-size: 12px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.newcheckChinese {
    display: inline-block;
    padding: 5px 20px;
    color: #15ccac;
    border-radius: 4px;
    border: 1px solid #15ccac;
    text-align: center;
}

@media (max-width: 1024px) {
    .questions-body {
        width: 100%;
    }
    .questions-view {
        width: 90%;
    }
    .content-search {
        width: 80%;
    }
    .pagination-box {
        text-align: center;
        padding: 0;
        margin-left: 0;
    }
}

.questions-ul {
    border-bottom: 1px solid #ddd;
}

.questions-li {
    list-style: none;
    height: auto;
    line-height: 42px;
    padding: 10px 0;
}

.content-search {
    width: 50%;
    margin: 36px auto;
}

.pagination-box {
    padding: 10px 20px;
}

.question-thead {
    height: 48px;
    background: #f8f8f9;
}

.question-thead td {
    vertical-align: middle;
}

.question-list {
    border-collapse: collapse;
    border-spacing: 0;
    border: 2px solid #eeeff1;
}

.question-list tr {
    border: 1px solid #eeeff1;
}

.green-btn {
    display: inline-block;
    background-color: #19be6b;
    font-size: 12px;
    padding: 5px 8px;
    color: #ffffff;
    border-radius: 3px;
}

.question-td1 {
    width: 60%;
    min-height: 0;
    height: 48px;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 8px 18px;
    line-height: 120%;
}

.question-td2 {
    width: 20%;
    text-align: left;
    padding-left: 10px;
    vertical-align: middle;
}
</style>

<script>
import pagination from "../../components/pagination.vue";

export default {
    components: {
        pagination,
    },

    data () {

        return {
            member_card: null,
            tipsBuyCard: false,
            termlist: [],
            searchText: '',

            pagination: {
                total: 0,
                count: 0,
                per_page: 0,
                current_page: 1,
                total_pages: 0
            },

            columns: [

                {
                    title: 'Glossary',
                    key: 'english',
                    align: 'left',
                    width: 168,
                },
                {
                    title: 'Definition',
                    key: 'english_defines',
                    align: 'left',
                },
                {
                    title: '详情',
                    key: 'action',
                    width: 168,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'success',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.routeLink('/term-content?id=' + params.row.id);
                                    }
                                }
                            }, '中英文'),
                        ]);
                    }
                }
            ],
        }

    },
    created () {
        this.getCarousel();
        this.$Notice.config({
            top: 120,
            duration: 3
        });
        this.$Notice.open({
            render: h => {
                return h('div', {
                        style: {

                        },
                        'class': {
                            clearfix: true,
                        },
                    }, [
                    h('img', {
                        attrs: {
                            src: 'http://zcfg.gjypzc.com/appDownload.png'
                        },
                        style: {
                            width: '100px',
                            float: 'left',
                            margin: '-7px'
                        }
                    }),
                    h('div', {
                        style: {
                            marginLeft: '100px',
                            paddingTop: '14px',
                            lineHeight: '28px',
                            fontSize: '16px',
                        },
                    }, [
                        h('p', {
                            domProps: {
                                innerHTML: '扫描二维码下载'
                            },
                        }),
                        h('p', {
                            domProps: {
                                innerHTML: '佳鑫术语词典APP'
                            },
                        })
                    ]),
                ])
            },
            duration: 0,
            // top: 1000,
        });
    },
    destroyed() {
        this.$Notice.destroy();
    },
    watch: {
        $route () {
            this.getCarousel();
        }
    },
    methods: {
        getCarousel () {
            let query = this.$route.query;
            query.include = "category";
            query.fe = 1
            this.$http.get('/term/list', {
                params: query
            }).then(response => {
                const res = response.data;
                this.termlist = res.data;
                this.pagination = {
                    total: res.meta.pagination.total,
                    per_page: res.meta.pagination.per_page,
                    current_page: res.meta.pagination.current_page,
                }
            }).catch(err => {
                this.$Notice.error({
                    title: 'termlist'
                })
                // this.$Message.error('termlist');
            })
        },// 共用跳转功能
        routeLink (link) {
            this.$router.push({ path: link });
        },
        doPayGold () {
            this.routeLink('/personal?name=card');
        },
        // 分页方法
        handlePage (current) {
            this.pagination.current_page = current;
            this.search();
        },
        // 检索按钮方法
        search () {
            let query = {
                page: this.pagination.current_page,
                category: this.$route.query.category,
                name: this.$route.query.name
            };
            this.$router.push({ path: this.$route.path, query });
        },
        // 查找有没会员卡
        fetchCard () {
            this.$http.get('/member/me?include=statute,term').then(rets => {
                this.member_card = rets.data.data.term;
            }).catch(err => {
                this.$Notice.error({
                    title: '请登录'
                })
                // this.$Message.error('请登录..');
            })
        },
        searchBtn () {
            var searchTextKey = this.searchText;
            var language = (/^[\u4e00-\u9fa5]+$/i.test(searchTextKey)) ? 'chinese' : 'english';
            if (searchTextKey == '') {
                this.$Notice.error({
                    title: '请输入中文或英文搜索术语'
                })
                // this.$Message.error('请输入中文或英文搜索术语..');
                return;
            } else {
                this.$http.get('/term/list/?include=category&' + language + ' = ' + searchTextKey)
                    .then(res => {
                        this.termlist = res.data.data;
                    }).catch(err => {
                        this.$Notice.error({
                            title: 'termlist'
                        })
                        // this.$Message.error('termlist');
                    })
            }
        },
        toTermDetail (id) {
            this.routeLink('/term-content?id=' + id);
        }

    }
}
</script>